<template>
    <div class="content">
        <SearchTitle @searchClick="SearchTitleClick" />
        <div class="CenterBox">
            <div class="fhanBox" @click="fanhuifun">&lt;返回</div>
            <div class="cardFlexBox">
                <el-card style="flex: 1; min-width: 0;">
                    <div class="flFlexBox">
                        <div class="flTitleBox">新闻类型</div>
                        <div class="flFlexFor">
                            <div class="tabsBox" :class="{ active: parameterData.new_type == item.dict_value }"
                                v-for="(item, index) in xwTypeData" :key="index" @click="xwlxfun(item.dict_value)">
                                {{ item.dict_label }}
                            </div>
                        </div>
                    </div>
                    <div class="flFlexBox">
                        <div class="flTitleBox">时间</div>
                        <div class="flFlexFor">
                            <div class="tabsBox" :class="{ active: parameterData.create_time === item.date }"
                                v-for="(item, index) in dateData" :key="index" @click="sjTasbsfun(item.date)">{{
                                    item.name }}</div>
                        </div>
                    </div>
                </el-card>
                <el-card style="flex: 3; min-width: 0;">
                    <div class="nrForBox" v-for="item in xwListData" :key="item.id" @click="xwItemClick(item.id)">
                        <div class="nrForLeft">
                            <img style="width: 100%;height: 100%;" :src="item.url" alt="">
                        </div>
                        <div class="nrForRight">
                            <div class="nrForBoxTitle">{{ item.title }}</div>
                            <div class="nrForBoxText">{{ item.description }}</div>
                            <div class="nrForBoxDate">{{ item.create_time }}</div>
                        </div>
                    </div>
                    <div class="fenyeBox">
                        <el-pagination v-model:current-page="parameterData.pageNum"
                            v-model:page-size="parameterData.pageSize" :page-sizes="[100, 200, 300, 400]" background
                            layout="prev, pager, next, jumper" :total="totalData"
                            @current-change="handleCurrentChange" />
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup>
import SearchTitle from '@/components/general/SearchTitle.vue';
import { ref, onMounted } from 'vue';
import { queryNewsList } from "@/api/api.js";
import { formatDate, getDaysBefore, getMonthsBefore, getYearsBefore } from '@/utils/time';
import { useRoute, useRouter } from 'vue-router';
import { lcNewsAnnouncementInfosDWTypeGroupBy } from '@/api/dictionary.js'
import { useStore } from '@/store/store';
const store = useStore()
const route = useRoute();
const router = useRouter();
const parameterData = ref({
    page: 1,
    limit: 7,
    new_type: '',
    create_time: ''
})
const totalData = ref(0);

const xwTypeData = ref([]);
const dateData = ref([
    {
        date: '',
        name: '全部'
    },
    {
        date: formatDate() + ' 00:00:00',
        name: '今日'
    },
    {
        date: getDaysBefore(3) + '00:00:00',
        name: '近三日'
    },
    {
        date: getDaysBefore(7) + '00:00:00',
        name: '近一周'
    },
    {
        date: getMonthsBefore(1) + '00:00:00',
        name: '近一月'
    },
    {
        date: getMonthsBefore(3) + '00:00:00',
        name: '近三月'
    },
    {
        date: getMonthsBefore(6) + '00:00:00',
        name: '近半年'
    },
    {
        date: getYearsBefore(1) + '00:00:00',
        name: '近一年'
    },
    {
        date: getYearsBefore(3) + '00:00:00',
        name: '近三年'
    },
])
const xwListData = ref([]);
onMounted(() => {
    // 顶部搜索跳转进来的
    if (route.query.searchType) {
        parameterData.value.title = route.query.title;
    }
    lcNewsAnnouncementInfosDWTypeGroupByfun()
});
// 新闻类型
const lcNewsAnnouncementInfosDWTypeGroupByfun = async () => {
    const res = await lcNewsAnnouncementInfosDWTypeGroupBy()
    xwTypeData.value = [
        {
            dict_label: '全部',
            dict_value: '',
        },
        ...res.result
    ]
    const foundType = xwTypeData.value.find(
        item => item.dict_label === route.query.title
    );
    parameterData.value.new_type = foundType?.dict_value || '';
    queryNewsListfun()
}
// 顶部搜索点击事件
const SearchTitleClick = (title) => {
    parameterData.value.title = title;
    parameterData.value.page = 1;
    queryNewsListfun()
}
// 新闻类型点击事件
const xwlxfun = (id) => {
    parameterData.value.new_type = id;
    parameterData.value.page = 1;
    queryNewsListfun()
};
// 时间点击事件
const sjTasbsfun = (date) => {
    parameterData.value.create_time = date;
    parameterData.value.page = 1;
    queryNewsListfun()
};
// 查询新闻列表
const queryNewsListfun = async () => {
    const res = await queryNewsList(parameterData.value)
    totalData.value = res.count;
    xwListData.value = res.data.map(item => {
        return {
            ...item,
            url: store.imgfengMian + item.file_path
        }
    });
}
const handleCurrentChange = (val) => {
    parameterData.value.page = val;
    queryNewsListfun()
}
const xwItemClick = (id) => {
    router.push({
        path: '/newsDetail',
        query: { id: id }
    });
}
const fanhuifun = () => {
    router.go(-1);
};
</script>

<style scoped lang="scss">
.content {
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
    min-height: 100vh;
    background-size: 100%;
    background-color: #f3f9fe;
}

.fhanBox {
    font-size: 16px;
    color: #767879;
    margin: 10px 0;
    cursor: pointer;

    &:hover {
        color: $green-color;
    }
}

.cardFlexBox {
    display: flex;
    gap: 15px;

    .flFlexBox {
        margin-bottom: 30px;

        .flTitleBox {
            font-size: 18px;
            color: #1F1F1F;
            margin-bottom: 15px;
        }

        .flFlexFor {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;

            .tabsBox {
                cursor: pointer;
                border-radius: 4px;
                padding: 2px 6px;
                box-sizing: border-box;
                font-size: 14px;
                border: 1px solid transparent;

                &.active {
                    color: $button-color;
                    border: 1px solid;
                }
            }
        }
    }

    .nrForBox {
        padding: 10px 0;
        border-bottom: 1px solid #CCCCCC;
        cursor: pointer;
        display: flex;
        gap: 10px;

        .nrForLeft {
            width: 25%;
            height: 140px;
        }

        .nrForRight {
            width: 70%;
        }

        .nrForBoxTitle {
            font-weight: bold;
            font-size: 18px;
            color: #1F1F1F;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;

            &:hover {
                color: $green-color;
            }
        }

        .nrForBoxText {
            font-size: 14px;
            color: #747474;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
        }

        .nrForBoxDate {
            font-size: 12px;
            color: #747474;
        }
    }

    .fenyeBox {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>